import Guide from '@/components/Guide';
import { trim } from '@/utils/format';
import { PageContainer, ProCard } from '@ant-design/pro-components';
import RcResizeObserver from 'rc-resize-observer';
import { useModel } from '@umijs/max';
import styles from './index.less';
import { useEffect, useState } from 'react';
import { Button, Progress } from 'antd';

const HomePage: React.FC = () => {
  const { name } = useModel('global');
  const [responsive, setResponsive] = useState(false);
  const [time,setTime] = useState(1500);
  const [showText,setShowText] = useState('25:00');
  const [timeId,setTimeId] = useState<any>(null)
  // 暂停计数
  const stop =()=>{
    clearTimeout(timeId);
  }
  // 重置时间
  const resetTime=()=>{
    setTime(1500);
    clearTimeout(timeId);
  };
  // 继续计数
  const constant=()=>{
    const timeid = setTimeout(()=>{
      setTime(time-30);
    },3000);
    setTimeId(timeid)
  }
  useEffect(()=>{
    if(time<0)clearTimeout(timeId)
    const timeoutid = setTimeout(()=>{
      setTime(time-30);
    },3000);
    setTimeId(timeoutid)
    const s = time;
    const mm = Math.floor(s/60)+'';
    let ss = s%60 + '';
    ss=ss.length === 1 ? '0'+ss : ss;
    setShowText(mm+':'+ss);
    console.log('时间计数器：%d,%d',time,timeoutid)
    // return clearTimeout(timeid);
  },[time]);
  return (
    <PageContainer ghost>
      <div className={styles.container}>
        <Guide name={trim(name)} />
      </div>
      <RcResizeObserver
      key="resize-observer"
      onResize={(offset) => {
        setResponsive(offset.width < 596);
      }}
    >
      <ProCard
        title="左右分栏带标题"
        extra="2019年9月28日"
        split={responsive ? 'horizontal' : 'vertical'}
        bordered
        headerBordered
      >
        <ProCard title="左侧详情" colSpan="50%">
          <div style={{ height: 500 }}>
          <Progress
            type="circle"
            strokeColor={{
              '0%': '#108ee9',
              '100%': '#87d068',
            }}
            percent={(1500-time)/15}
            format={()=> showText}
            width={400}
          />
          <Button onClick={stop}>暂停计数</Button>
          <Button onClick={resetTime}>重置时间</Button>
          <Button onClick={constant}>恢复计数</Button>
          
          </div>
          
        </ProCard>
        <ProCard.Divider type='vertical'></ProCard.Divider>
        <ProCard title="流量占用情况">
          <div style={{ height: 360 }}>右侧内容</div>
        </ProCard>
      </ProCard>
    </RcResizeObserver>
    </PageContainer>
  );
};

export default HomePage;
